<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p>当前页码是{{pageinfo.page}}</p>
      <button v-for="item in 5" @click="pageinfo.page=item">{{item}}</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            pageinfo: {
              page: 1,
            },
          };
        },
        watch: {
          //   pageinfo: {
          //     deep: true, //  开启深度监听
          //     immediate: true, // 开启立即监听
          //     handler(newval, oldval) {
          //       //  监听修改的新旧值，且做出行为
          //       console.log("page发生改变", newval === oldval);
          //     },
          //   },
          "pageinfo.page"(newval, oldval) {
            console.log("page发生改变", newval, oldval);
          },
        },
      });
    </script>
  </body>
</html>
